<template>
  <div class="rightRegion">
    <el-scrollbar :height="scrollerHeight">
      <el-collapse v-model="basicsData.activeNames">
        <el-collapse-item title="属性" name="1">
          <el-form
            :model="selectedWidget.options"
            label-width="auto"
            label-position="top"
          >
            <component
              v-bind:is="FieldComs[`${selectedWidget.type}Attribute`]"
              :key="selectedWidget.id"
              :selected-widget="selectedWidget"
              :selected-options="selectedWidget.options"
            ></component>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import useCaHeight from "@/components/hooks/useCaHeight";
import {
  selectedWidget,
  clearWidgetList,
} from "@/views/pageDesign/components/globalVariable";
import FieldComs from "./index";

defineOptions({
  name: "rightRegion",
  inheritAttrs: false,
});

let { scrollerHeight, calculatedAltitude } = useCaHeight();

// 基础数据
let basicsData = reactive({
  activeNames: "1", //折叠面板
});

onMounted(() => {
  clearWidgetList();
  calculatedAltitude(45);
});
</script>

<style lang="scss" scoped></style>
